<template>
  <div class="section">
    <h1>计算盒子</h1>
    <div class="base-info">
      <h3 id="baseInfo">基本信息</h3>
      <section class="info flex">
        <span>
          客户名称：
          <label>{{ baseInfo.customerName }}</label>
        </span>
        <span>
          门店名称：
          <label>{{ baseInfo.shopName }}</label>
        </span>
        <span>
          ShopID：
          <label>{{ baseInfo.shopId.slice(0, 10) + '...' }}</label>
          <a-icon type="copy" class="hand" @click="copyToClipboard(baseInfo.shopId)" />
        </span>
        <span>
          CID：
          <label>{{ baseInfo.customerId }}</label>
        </span>
        <span>
          MacID：
          <label>{{ baseInfo.mac }}</label>
        </span>
        <span>
          端口号：
          <label>{{ baseInfo.port }}</label>
        </span>
        <span>
          盒子编号：
          <label>{{ baseInfo.no }}</label>
        </span>
        <span>
          产品版本：
          <label>{{ baseInfo.version }}</label>
        </span>
        <span>
          盒子类型：
          <label>{{ baseInfo.type === 0 ? '新零售' : baseInfo.type === 1 ? '红外' : '广告机' }}</label>
        </span>
        <span>
          在线状态：
          <label>{{ baseInfo.status === 0 ? '离线' : '在线' }}</label>
        </span>
      </section>
    </div>
    <div class="work-info">
      <h3 class="bold" id="workInfo">运行信息</h3>
      <section>
        <h3 class="bold">关联设备</h3>
        <a-table
          :columns="columns"
          :data-source="tableData"
          row-key="id"
          :loading="loading"
          v-if="!ad"
        >
          <span slot="snapshot" slot-scope="snapshot">
            <img :src="snapshot" width="80" class="hand" @click="openDialog(snapshot)" alt />
          </span>
        </a-table>
        <div class="ad-box flex" v-else>
          <span>
            红外摄像头SN：
            <label>{{ adBox.sn }}</label>
          </span>
          <span>
            摄像头型号：
            <label>{{ adBox.model }}</label>
          </span>
        </div>
        <h3 class="bold">运行状态</h3>
        <p class="href">点击此处查看运行信息</p>
      </section>
    </div>
    <div class="stock-record">
      <h3 class="bold" id="stockRecord">出入库记录</h3>
      <section>
        <span @click="toStockRecord">点击此处查看出入库记录</span>
      </section>
    </div>
    <div class="breakdown-record">
      <h3 class="bold" id="breakdownRecord">故障记录</h3>
      <section>
        <span>点击此处查看出故障记录</span>
      </section>
    </div>
    <a-modal title="截图" :visible="visible" :footer="null" @cancel="visible = false">
      <img :src="snapshotUrl" width="100%" />
    </a-modal>
  </div>
</template>
<script>
import req from '@/utils/request'
import { getQueryString } from '@/utils'
export default {
  props: {

  },
  data() {
    return {
      baseInfo: {},
      columns: [
        {
          dataIndex: 'id',
          title: '盒子id',
          width: 100
        },
        {
          dataIndex: 'no',
          title: '盒子编号',
          width: 100
        },
        {
          dataIndex: 'type',
          title: '盒子类型',
          width: 120
        },
        {
          dataIndex: 'model',
          title: '盒子型号',
          width: 100
        },
        {
          dataIndex: 'mac',
          title: 'mac',
          width: 100,
          ellipsis: true
        },
        {
          dataIndex: 'ip',
          title: 'ip',
          width: 100,
          ellipsis: true
        },
        {
          dataIndex: 'bindTime',
          title: '绑定时间',
          width: 150
        },
        {
          dataIndex: 'snapshot',
          title: '截图',
          width: 100,
          scopedSlots: { customRender: 'snapshot' }
        }
      ],
      tableData: [],
      loading: false,
      visible: false,
      snapshotUrl: '',
      adBox: {},
      ad: getQueryString('ad')
    }
  },
  created() {
    this.getBaseInfo()
    this.getWorkInfo()
  },
  methods: {
    getBaseInfo() {
      const params = {
        boxId: getQueryString('boxId')
      }
      req.get('/api/box/getInfo', params).then(res => {
        this.baseInfo = res.data
      })
    },
    getWorkInfo() {
      const params = {
        boxId: getQueryString('boxId'),
        AD: getQueryString('ad') ? true : false,
      }
      this.loading = true
      req.get('/api/box/getCameraList', params).then(res => {
        if (Array.isArray(res.data)) {
          this.tableData = res.data
        } else {
          this.adBox = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    copyToClipboard(txt) {
      const tag = document.createElement('input')
      tag.setAttribute('id', 'cp_input')
      tag.value = txt
      tag.style.opacity = '0'
      document.body.appendChild(tag)
      tag.select()
      document.execCommand('copy')
      tag.remove()
      this.$message.success('复制成功')
    },
    toStockRecord() {
      let url = ''
      if (process.env.NODE_ENV === 'development') {
        url = 'http://localhost:8081/#/inventory-management/deviceMsg?accessToken=' + getQueryString('accessToken')
      }
      window.open(url)
    },
    openDialog(imgUrl) {
      this.visible = true
      this.snapshotUrl = imgUrl
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  flex: 8;
  > h1 {
    font-weight: bold;
    font-size: 22px;
  }
  .base-info {
    margin-bottom: 10px;
    h3 {
      font-weight: bold;
    }
    .info {
      background: #fff;
      flex-wrap: wrap;
      row-gap: 10px;
      padding: 10px;
      > span {
        width: 33.3%;
        font-weight: bold;
        white-space: nowrap;
        label {
          font-weight: normal;
        }
        i {
          color: #1890ff;
          margin-left: 10px;
        }
      }
    }
  }
  .work-info {
    section {
      background: #fff;
      h3 {
        padding: 10px;
        margin-bottom: 0;
      }
      /deep/.ant-table-wrapper {
        padding: 0 10px;
        overflow-x: auto;
      }
      .ad-box {
        padding: 0 10px;
        span {
          font-weight: bold;
          width: 33.3%;
          label {
            font-weight: normal;
          }
        }
      }
      .href {
        padding: 0 10px 10px;
        color: #1890ff;
        cursor: pointer;
        background: #fff;
      }
    }
  }
  .stock-record,
  .breakdown-record {
    margin: 10px 0;
    section {
      background: #fff;
      padding: 10px;
      color: #1890ff;
      cursor: pointer;
    }
  }
}
</style>